<template>
  <el-dialog
    title="权限分配"
    :visible.sync="dialogShow"
  >
    <el-tree
      ref="tree"
      :data="allAuth"
      node-key="id"
      :default-checked-keys="permIds"
      show-checkbox
      :props="{label:'name'}"
    />

    <span slot="footer">
      <el-button @click="dialogShow=false"> 取消</el-button>
      <el-button type="primary" @click="submitFn">确认</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { getPermissionList } from '@/api/permisson.js'
import { tranListToTreeData } from '@/utils/index.js'
import { getRoleDetail, assignPrem } from '@/api/setting.js'
export default {
  name: 'SetAuth',
  data() {
    return {
      dialogShow: false,
      allAuth: [], // 所有权限
      permIds: [], // 当前角色的权限点
      userId: ''// 当前角色的id
    }
  },
  methods: {
    async getPermissionList() {
      const res = await getPermissionList()// 请求接口拿到所有的角色权限
      // console.log(res)
      this.allAuth = tranListToTreeData(res, '0')// 通过递归处理拿到树形数据,赋值渲染
      // console.log(this.allAuth)
    },
    // 根据id拿到角色自己的权限点
    async getRoleDetail(id) {
      this.userId = id
      const res = await getRoleDetail(id)
      console.log(res)
      this.permIds = res.permIds// 赋值给当前角色的权限点,完成回显
    },
    // 点击提交按钮确认编辑
    async submitFn() {
      await assignPrem({ // 调用接口,完成编辑
        id: this.userId,
        permIds: this.$refs.tree.getCheckedKeys()// 通过element的方法getCheckedKeys()拿到当前tree被选中的节点的key值==数组
      })
      // console.log(res)
      this.$message.success('操作成功')// 提示成功
      this.dialogShow = false// 关闭弹框
    }

  }

}
</script>

<style>

</style>
